
<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" :plugin="plugin" class="amap-demo">
      <el-amap-marker
        vid="component-marker"
        :position="componentMarker.position"
        :content-render="componentMarker.contentRender"
      />
      <!-- <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :content="marker.content"
        :vid="index"
      />-->
      <el-amap-marker
        v-for="(marker, index) in markersData"
        :key="index"
        :position="marker.position"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :content="marker.content"
        :vid="index"
      />
    </el-amap>
    <!-- <div class="toolbar">
      <button type="button" name="button" v-on:click="toggleVisible">toggle first marker</button>
      <button type="button" name="button" v-on:click="changePosition">change position</button>
      <button type="button" name="button" v-on:click="chnageDraggle">change draggle</button>
      <button type="button" name="button" v-on:click="addMarker">add marker</button>
      <button type="button" name="button" v-on:click="removeMarker">remove marker</button>
    </div>-->
  </div>
</template>

<script>
import { getAllForMap } from '@/api/battery/data'

const exampleComponents = {
  props: ['text'],
  template: `<div>text from  parent: {{text}}</div>`
}
export default {
  name: 'amap-page',
  data() {
    return {
      markerList: [],
      markersData: [
        // { position: [121.5273285, 31.21615044], doc: '10', content: '' },
        // { position: [121.5373285, 31.21515044], doc: '30', content: '' },
        // { position: [121.5473285, 31.21415044], doc: '40', content: '' },
        // { position: [121.5573285, 31.21115044], doc: '50', content: '' },
        // { position: [121.5673285, 31.21225044], doc: '60', content: '' }
      ],
      plugin: [
        {
          pName: 'Scale',
          events: {
            init(instance) {
              console.log(instance)
            }
          }
        },
        {
          pName: 'ToolBar',
          events: {
            init(instance) {
              console.log(instance)
            }
          }
        },
        {
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
              console.log(instance)
            }
          }
        }
      ],
      count: 1,
      slotStyle: {
        padding: '2px 8px',
        background: '#eee',
        color: '#333',
        border: '1px solid #aaa'
      },
      content: `<div class="mark-detail">
      <div>
        <div class="bg-red">10%</div>
      </div>
    </div>`,
      icon:
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3720187238,857742455&fm=26&gp=0.jpg',
      zoom: 10,
      center: [114.39028, 30.447948],
      markers: [
        {
          position: [114.39028, 30.447948],
          events: {
            click: () => {
              alert('click marker')
            },
            dragend: e => {
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
            }
          },
          visible: true,
          draggable: false,
          content: `<div class="mark-detail">
      <div>
        <div class="bg-green">85%</div>
      </div>
    </div>`,
          template: '<span>1</span>'
        },
        {
          position: [114.39028, 30.447948],
          events: {
            click: () => {
              alert('click marker')
            },
            dragend: e => {
              console.log('---event---: dragend')
              this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
            }
          },
          visible: true,
          content: `<div class="mark-detail">
      <div>
        <div class="bg-red">15%</div>
      </div>
    </div>`,
          draggable: false,
          template: '<span>1</span>'
        }
      ],
      renderMarker: {
        position: [114.39028, 30.447948],
        contentRender: (h, instance) => {
          // if use jsx you can write in this
          // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
          return h(
            'div',
            {
              style: {
                background: '#80cbc4',
                whiteSpace: 'nowrap',
                border: 'solid #ddd 1px',
                color: '#f00'
              },
              on: {
                click: () => {
                  const position = this.renderMarker.position
                  this.renderMarker.position = [
                    position[0] + 0.002,
                    position[1] - 0.002
                  ]
                }
              }
            },
            ['marker inner text']
          )
        }
      },
      componentMarker: {
        position: [114.39028, 30.447948],
        contentRender: (h, instance) =>
          h(
            exampleComponents,
            {
              style: { backgroundColor: '#fff' },
              props: { text: 'father is here' }
            },
            ['xxxxxxx']
          )
      },
      slotMarker: {
        position: [114.39028, 30.447948]
      }
    }
  },
  methods: {
    onClick() {
      this.count += 1
    },
    changePosition() {
      const position = this.markers[0].position
      this.markers[0].position = [position[0] + 0.002, position[1] - 0.002]
    },
    chnageDraggle() {
      const draggable = this.markers[0].draggable
      this.markers[0].draggable = !draggable
    },
    toggleVisible() {
      const visableVar = this.markers[0].visible
      this.markers[0].visible = !visableVar
    },
    addMarker() {
      const marker = {
        position: [
          121.5273285 + (Math.random() - 0.5) * 0.02,
          31.21515044 + (Math.random() - 0.5) * 0.02
        ]
      }
      this.markers.push(marker)
    },
    removeMarker() {
      if (!this.markers.length) return
      this.markers.splice(this.markers.length - 1, 1)
    }
  },
  mounted() {
    const that = this
    getAllForMap().then(response => {
      for (const item of response.data.data) {
        const point = {position: [], doc: '', content: ''}
        point.position.push(item.longitude)
        point.position.push(item.latitude)
        point.doc = 'B'
        console.info(point)
        that.markersData.push(point)
      }
    })

    for (var i = 0; that.markersData.length > i; i++) {
      // if (that.markersData[i].doc > 30) {
        that.markersData[i].content = `<div class="mark-detail">
      <div>
        <div class="bg-red">${that.markersData[i].doc}</div>
      </div>
    </div>`
      // } else {
      //   that.markersData[i].content = `<div class="mark-detail">
      // <div>
      //   <div class="bg-red">${that.markersData[i].doc}%</div>
      // </div>
    // </div>`
    //   }
      // alert(key + ':' + that.markersData[i][key]);
    }
  }
}
</script>
  <style>
.bg-red {
  background: url(https://webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/assets/fresh/fresh-fs8.png)
    no-repeat;
  background-position: -612px 0;
  width: 36px;
  height: 44px;
  display: block;
  text-align: center;
  line-height: 44px;
  font-size: 12px;
}
.bg-green {
  background: url(https://webapi.amap.com/ui/1.1/ui/overlay/SimpleMarker/assets/fresh/fresh-fs8.png)
    no-repeat;
  background-position: -252px 0;
  width: 36px;
  height: 44px;
  display: block;
  text-align: center;
  line-height: 44px;
  font-size: 12px;
}
.amap-page-container {
  height: calc(100vh - 100px);
}
.amap-demo {
  height: 500px;
}
</style>
